<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
	   <option value="吉林省">吉林省</option>
	   <option value="辽宁省">辽宁省</option>
	   <option value="山东省">山东省</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  <script type="text/javascript" language="JavaScript">
      //给id为province注册变化的事件
      document.getElementById("province").onchange = function(){
          alert("change");
          //清空点id为city的option子元素
          var citySelectElement = document.getElementById("city");
          var cityOptionElements = citySelectElement.getElementsByTagName("option");
          for(var i = cityOptionElements.length-1;i>0;i--){
              citySelectElement.removeChild(cityOptionElements[i]);
          }

          //得到代表XML文档的对象
          var xmlDoc = parseXML();
//          alert(xmlDoc);
           //得到当前的province选择的值：html中
          var selectProvince = this.value;
//            alert(selectProvince);
          //遍历xml文件
          //xml中的对应的省份元素
          var xmlProvince;
//          alert(xmlProvince);
          var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
//          alert(xmlProvinceElements);
            alert(xmlProvinceElements.length);
          for(var i = 0;i<xmlProvinceElements.length;i++){

//              alert(xmlProvinceElements[i]+"411");
              if(xmlProvinceElements[i].getAttribute("name")==selectProvince){
//                  alert(xmlProvinceElements[i].firstChild.value);
                  xmlProvince = xmlProvinceElements[i];
                  break;
              }
      }
//alert("dsds");
//          alert(xmlProvince);
          if(xmlProvince!=null){
              var xmlCity = xmlProvince.getElementsByTagName("city");
              alert(xmlCity.length);
              for(var  i = 0;i<xmlCity.length;i++){
                  //创建option元素
                  alert(xmlCity[i].firstChild.nodeValue);
                  var  optionElement = document.createElement("option");
                  optionElement.setAttribute("value",xmlCity[i].firstChild.nodeValue);
                  var optionTextElement = document.createTextNode(xmlCity[i].firstChild.nodeValue);
                  optionElement.appendChild(optionTextElement);
                  citySelectElement.appendChild(optionElement);
              }
          }
      function parseXML(){
//          alert("ds");
          try{
              xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          }
          catch (e){
                try{
                    xmlDoc = document.implementation.createDocument("","",null);
                }catch (e)
                {
                    alert(e.message);
                    return;
                }
          }
          xmlDoc.async = false;
          xmlDoc.load("cities.xml");
          return xmlDoc;
      }
      }
  </script>
  </body>
</html>
